<template>
	<view class="page">
		<topVue title="积分区"></topVue>
		<view class="rightClick flex align-center" @click="navigate('./shopcar', 4)">
			<image src="../../static/shop_car.png" style="width: 42rpx; height: 42rpx;"></image>
		</view>
		
		<!-- banner -->
		<view class="bannerVue margin0 padding30">
			<text>消费积分</text>
			<view class="value">{{ balanceInfo.spendPoints/100 || 0 }}</view>
			<text>注意：积分区商品仅支持消费积分兑换</text>
		</view>
		
		<view class="w100 flex-between padding-row30 margin30">
			<view class="menu padding30 flex-column flex-between" @click="$u.toast('暂未开放')">
				<image src="../../static/index/list-ol.png" style="width: 42rpx; height: 42rpx;"></image>
				<view class="label">活动任务</view>
				<text>赚取更多积分</text>
			</view>
			<view class="menu padding30 flex-column flex-between" @click="navigate('../person/pointCenter')">
				<image src="../../static/index/record.png" style="width: 42rpx; height: 42rpx;"></image>
				<view class="label">积分明细</view>
				<text>查看积分记录</text>
			</view>
		</view>
		
		<!-- 搜索 -->
		<!-- <view class="searchVue flex align-center relative margin30">
			<input type="text" placeholder="搜索商品" placeholder-style="color: #9CA3AF"/>
			<image src="../../static/search.png" style="width: 38rpx; height: 38rpx; left: 50rpx;" class="absolute-middle"></image>
		</view> -->
		
		<!-- 商品类型切换 -->
		<view class="tabVue margin30">
			<scroll-view scroll-x="true" class="scrollVue">
				<view  class="tab" v-for="(item, index) in tabs" :key="index"  :class="{active: item.id==categoryId}" @click="tabChange(item)">{{ item.name}}</view>				
			</scroll-view>
		</view>
		
		<!-- 产品列表 -->
		<view class="productVue flex-wrap flex-between">
			<view class="product" v-for="(item, index) in list" :key="index" @click="navigate('./productDetail_4', item.id)">
				<view class="picture relative">
					<image :src="item.picUrl" style="width: 100%; height: 100%; border-radius: 12rpx 12rpx 0 0;"></image>
				</view>
				<view class="info padding20 flex-column flex-between">
					<view class="name line-1">{{item.name}}</view>
					<view class="flex align-center">
						<image src="../../static/index/point.png" style="width: 34rpx; height: 34rpx;"></image>
						<text class="pointPrice">{{item.price/100}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		data(){
			return {
				tabs: [],
				current: 0,
				categoryId: "",
				pageNum: 1,
				pageSize: 10,
				list: [],
				pages: 0,
			}
		},
		
		async onLoad() {
			this.getCategroyList()
		},
		
		async onReachBottom() {
			if(this.pageNum===this.pages) return
			this.pageNum++
			await this.getList()
		},
		
		computed: {
			...mapState({
				balanceInfo: state=> state.balanceInfo,
				isLogin: state=> state.balanceInfo
			})
		},
		
		methods: {
			// 登录校验跳转
			navigate(path, value){
				if(!this.$store.state.isLogin) return this.$tools.route("../login/login")
				uni.navigateTo({
					url: path + "?value=" + value
				})
			},
			
			async getCategroyList(){
				// 订单区 1  折扣去 2  活动区 3  积分区 4
				const result = await this.$request("/app-api/product/category/list-second", "GET", { parentId: 4 })
				console.log(result)
				if(result.code===0) {
					this.tabs = result.data
					this.categoryId = result.data[0].id
					console.log("积分区商品分类", this.tabs)
					this.getList()
				}
			},
			// 获取商品列表
			async getList(){
				const result = await this.$request("/app-api/product/spu/page", "GET", {
					categoryId: this.categoryId,
					pageNo: this.pageNum,
					pageSize: this.pageSize
				})
				if(result.code===0) {
					this.list = this.list.concat(result.data.list)
					this.pages = Math.ceil(result.data.total/this.pageSize)
					console.log("总页数", this.pages)
					console.log("积分区商品列表", this.list)
				}
			},
			
			tabChange(e){
				console.log(e)
				this.categoryId = e.id
				console.log(this.categoryId)
				this.pageNum = 1
				this.list = []
				this.getList()
			}
		}
	}
</script>

<style lang="less" scoped>
	.bannerVue {
		width: 690rpx;
		background: linear-gradient(to right, #1CC289, #60A5FA);
		border-radius: 18rpx;
		text {
			color: #fff;
			line-height: 1;
			font-size: 26rpx;
			opacity: 0.7;
		}
		.value {
			color: #fff;
			font-weight: 600;
			line-height: 1;
			font-size: 42rpx;
			padding: 20rpx 0;
		}
	}
	
	.menu {
		width: 330rpx;
		height: 200rpx;
		background: #fff;
		border-radius: 18rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
		.label {
			font-weight: 600;
			line-height: 1;
		}
		text {
			color: #6B7280;
			font-size: 26rpx;
			line-height: 1;
		}
	}
	
	.searchVue {
		width: 100%;
		height: 78rpx;
		padding: 0 30rpx;
		input {
			width: 100%;
			height: 78rpx;
			background: #fff;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
			border-radius: 36rpx;
			color: #333;
			font-size: 28rpx;
			padding-left: 64rpx;
		}
	}
	
	.tabVue {
		width: 100%;
		height: 66rpx;
		padding: 0 30rpx;
		.scrollVue {
			width: 100%;
			height: 66rpx;
			box-sizing: border-box;
			white-space: nowrap; 
			.tab {
				width: 150rpx;
				height: 66rpx;
				background: #F3F4F6;
				display: inline-block;
				border-radius: 30rpx;
				color: #4B5563;
				line-height: 66rpx;
				text-align: center;
				margin-right: 20rpx;
			}
			.tab:nth-last-child(1) {
				margin-right: 0;
			}
			.active {
				background: linear-gradient(to right, #1CC289, #60A5FA);
				color: #fff;
			}
		}
	}
	
	.productVue {
		width: 100%;
		padding: 30rpx 30rpx 0;
		.product {
			width: 330rpx;
			height: 450rpx;
			margin-bottom: 30rpx;
			background: #fff;
			border-radius: 15rpx;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
			.picture {
				width: 330rpx;
				height: 330rpx;
			}
			.name {
				color: #333;
				font-weight: 600;
				line-height: 1;
			}
			.pointPrice {
				color: #1CC289; 
				line-height: 1;
				padding-left: 6rpx;
			}
			.info {
				width: 100%;
				height: 120rpx;
			}
		}
	}
</style>